import React, {useEffect, useState} from 'react';
import "../scss/sql-edit-form.scss"
import {AlertComponent, render as renderAmis, ToastComponent} from 'amis';
import {useModel} from "@@/plugin-model";
import {Modal} from "antd";
import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';


const RuleChainEditForm = (props: any) => {
  const {fetcher, notify, alert, copy} = useModel("amisEnv")

  let amisJSON = {
    "type": "form",
    "title":null,
    "resetAfterSubmit": true,
    "onFinished": () => {
      props.ok()
      props.handleRcEditFormOpen(false)
    },
    "api": {
      "method": props.editType==='add'?'post':'put',
      "url": `/ruleChain/${props.editType}`
    },
    "data": {
      ...props.values,
      elData:props.values.elData?props.values.elData:'',
      pageId:props.pageId
    },
    "body": [
      {
        "type": "group",
        "body": [
          {
            "type": "input-text",
            "required":true,
            "name": "chainName",
            "label": "规则名称"
          },
          {
            "type": "input-text",
            "required":true,
            "name": "chainDesc",
            "label": "规则描述"
          }
        ]
      },
      {
        "type": "editor",
        "language": "javascript",
        "label": "规则表达式",
        "name": "elData",
        "allowFullscreen": true,
        "required":true,
        "placeholder": "请在此编写规则表达式"
      }
    ],
  }
  const handleCancel = () => {
    props.handleRcEditFormOpen(false)
  }

  useEffect(() => {
    console.log("props value----------------------",props.values)
    amisJSON.data = {
      ...props.values,
      pageId:props.pageId,
      elData:props.values.elData?props.values.elData:''
    }
  }, [props.rcEditFormOpen]);

  return (
    <>
      <Modal title={props.editType==='add'?"新增规则表达式":'编辑规则表达式'}
             destroyOnClose={true}
             maskClosable={false}
             width={1280} open={props.rcEditFormOpen} footer={null} closable={true} onCancel={handleCancel}>
        <ToastComponent key="toast"/>
        <AlertComponent key="alert"/>
        <div style={{display:'block'}}>
          {renderAmis(amisJSON, {}, {
            fetcher: fetcher,
            notify: notify,
            alert: alert,
            copy: copy
          })}
        </div>

      </Modal>
    </>
  );
}

export default RuleChainEditForm;
